<template>
	<div id="app">
		<!-- 文件详情 -->
	    <div id="detail">
	       <!-- //头部  -->
	       <div class="pic clear">
	            <!-- //图标  -->
	            <div class="headerLeft">
	              <a href="classfiy.html"><img src="img/left.png" ></a>
	            </div>
	            <div class="headerRight">
	              <a href="###" class="fl"><img src="img/start.png"></a>
	              <a href="###" class="fl"><img src="img/share.png" ></a>
	            </div>
	             <!-- //图片  -->
	            <div class="detailImg">
	              <img v-bind:src=detail.src />
	              <p class="showdel"></p>
	            </div>
	            <!-- //详情 -->
	       </div>

	       <div class="conCloum">
	            <h2>{{detail.title}}</h2>
	           <ul>
	             <li class="clear">
	                <div class="fl">
	                  <span class="red">¥{{detail.newPrice}}</span>
	                  原价:<s>¥{{detail.oldPrice}}</s>
	                </div>
	                <div class="fr">
	                  <span>销售:{{detail.num}}</span>
	                </div>
	                
	             </li>
	             <li>
	               <span>限时:已过期</span>
	               <span class="fr">限量:{{detail.limitNum}}件</span>
	             </li>
	           </ul> 
	       </div>
	        
	        <!-- 中间部分 -->
	       
	         <div class="info">
	            <ul class="headList clear" id="headL">
	              <li class="fl"><a class="redAct" href="###">商品详情</a></li>
	              <li class="fr"><a href="###">用户评价</a></li>
	            </ul>
	            <!-- 商品详情 -->
	            <div class="del" id="del">
	       		   <img v-bind:src=detail.detailIMG>
	       		  </div>
	            <!-- 用户评价 -->
	            <div class="cloum" id="cloum">
	            	<p>{{detail.username}} 
	            		<img src="img/sartO.png">
	            		<img src="img/sartO.png">
	            		<img src="img/sartO.png">
	            		<img src="img/sartO.png">
	            		<img src="img/sartO.png">
	            		<img src="img/sartG.png">
	            		<span class="fr">{{detail.time}}</span> 
	            	</p>
	            	<p>{{detail.cloum}}</p>
	            </div>
	            <div class="add"></div>
	        </div> 
	        
	    </div>
	    <!-- 底部 -->
		<div class="foot">
			<a href="###"><img src="img/car.png"></a>
			<a href="###">加入购物车</a>
			<a href="###">立即购买</a>
		</div>

	</div>
</template>
<script>
export default {
		data(){
    		return {
         
          detail:[]
        }
    },
	 created:function(){
			var str = location.search;
			var id = str.substr(1);
			var arr = [];
			var _this = this;//this和ajax里面的this是不一样的
			$.ajax({
			    type:"GET",
			    url:"http://172.16.18.43/classfiy/detail.php?cb=JSON_CALL&"+id,
			    jsonp:"cb",
			    dataType:"jsonp",
			    success:function(data){
			        _this.detail = data;
			    }
			 })

	    },
		ready:function(){
			var $li = $("#headL li");
			var $del = $("#del");
			var $cloum = $("#cloum");
			var index = 0;
			var $del = $("#del");
			var cloum = $("#cloum");
			$li.each(function(i){
			    $li.eq(i).attr("index",i);
			})

			$li.on("click",function(){
				console.log(11);
			    $li.each(function(i){
			       $li.eq(i).find("a").removeClass("redAct");
			    })
			    $(this).find("a").addClass("redAct");
			    index = $(this).attr("index");
			    if (index==0) {
			    	$del.show();
			    	$cloum.hide();
			    }else if (index==1) {
			    	$del.hide();
			    	$cloum.show();
			    }
			})	
		}
}
</script>
<style>
	  /*详情*/
  	body,html{
  		width: 100%;
  		height: 100%;
  	}
   
    #detail{
      width: 100%;
    }
    #detail header{
      width: 100%;
    }
    #detail .headerLeft{
      width: 3%;
      display: inline-block;
      position: absolute;
      z-index: 10;
      left: 3%;
      top: 3%;
    }
    #detail .headerLeft img{
      width: 100%;
    }
    #detail .headerRight{
    	width: 24%;
       position: absolute;
       z-index: 10;
       right: 0;
       top: 3%;

    }
    #detail .headerRight a{
      width: 34%;
    }
    .headerRight a:nth-child(2){
      margin-left: 14%;
    }
    #detail .headerRight img{
      width: 100%;
    }
    .detailImg{
      width: 100%;
      position: relative;
     }
     .detailImg img{
        width: 100%;
        border: none;
        vertical-align: middle;
     }
   .showdel{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1) 18%, transparent 95%, rgba(0, 0, 0, 0.1));
     }
    .conCloum{
      padding: 4%;
    }
    .conCloum span{
    	color: #666;
    	font-size: 0.18rem;
    }
    .conCloum li:nth-child(1){
      border-bottom: 1px solid #e0e0e0;
    }
    
    /*商品详情*/
    .info{
      padding-top:2%; 
    }
    .info .headList{
      width: 100%;
      background: white;
      border-bottom: 1px solid #d9d9d9;
    }
    .headList li{
      width: 50%;
      text-align: center;
      font-size: 0.18rem;
      float: left;
    }
    .headList li a{
      color: #666666; 
      padding: 3% 0;
      text-decoration: none; 
      box-sizing: border-box;    
    }
    .redAct{
    	box-sizing: border-box;
        border-bottom: 2px solid #de0000;
    }
    /*详情*/
    .del{
    	width: 100%;
    	padding-top: 4%;
    }
    .del img{
    	width: 100%;
    }
    
    /*评论*/
    .red{
    	color: #de0000!important;
    }
    .cloum{
    	padding: 4%;
    	display: none;
    }
    .cloum p,span{
    	font-size: 0.18rem;
    	line-height: 0.4rem;
    }
    .cloum p{
    	height: 10%;
    }
    .add{
    	padding: 10%;
    }
    .foot{
    	position: fixed;
    	bottom: 0;
    	width: 100%;
    	padding: 2% 4%;
    	background: #f2f2f2;
    } 
    .foot a{
    	text-decoration: none;
    	display: inline-block;
    	width: 25%;
    	font-size: 0.18rem;
    	color: white;
    	text-align: center;
    	border-radius: 5px;
    }
    .foot a:nth-child(1){
    	width: 8%;
    }
    .foot a:nth-child(1) img{
    	width: 100%;
    }
    .foot a:nth-child(2){
    	background: #ed9d2a;
    	padding:1% 2%;
    	margin-left: 20%; 
    }
    .foot a:nth-child(3){
    	background: #ee3749;
    	padding:1% 2%; 
    	margin-left: 5%;
    }
</style>



